<template>
  <div class="chat-container">

    <content-framework>
      <template #left>
        <div class="left">
          <search :type="1"></search>
          <ul class="chat-list-content no-drag">
            <li @click="handleChat(item)" v-for="item in chatStore.chatList" :class="item.isTop || item.sessionId === chatStore.currentSessionId ? 'topActive' : ''">
              <div class="avatar-container">
                <img class="avatar" :src="item.lastAvatar" alt="">
              </div>
              <div class="chat-list-item-right">
                <div class="chat-header">
                  <span class="text-ellipsis chat-name">{{ item.contactName }}</span>
                  <span class="chat-time">{{ item.updateTime }}</span>
                </div>
                <span class="text-ellipsis" style="font-size: 12px">{{item.isOwner === 1? '我:' : `${item.contactName}:`}} {{ item.lastMessage }}</span>
              </div>
            </li>
          </ul>
        </div>

      </template>
      <template #right>
        <chat-detail ref="chatDetailRef"></chat-detail>
      </template>
    </content-framework>

  </div>
</template>

<script setup>
import search from '@/components/search/index.vue'
import contentFramework from '@/framework/rightContent/index.vue'
import { useChatStore } from '../../stores/chat'
import chatDetail from '@/views/chat/detail/index.vue'
import { nextTick, ref } from 'vue'


const chatDetailRef = ref(null)

const chatStore = useChatStore()

const handleChat = (chat) => {
  if (chat.sessionId !== chatStore.currentSessionId) {
    window.ipcRenderer.invoke('get-chat-list' , {sessionId: chat.sessionId} ).then(data => {
      chatStore.currentSessionId = chat.sessionId
      chatStore.currentChat = chat
      chatStore.messageList = data.list

      nextTick(() => {
        chatDetailRef.value.scrollToBottom()
      })
    })
  }


}

</script>



<style scoped lang="less">
.chat-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;


  .left {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(247, 247, 247);
  }

  .chat-list-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    user-select: none;


    li {
      padding: 15px;
      box-sizing: border-box;
      height: 68px;
      //background-color: red;
      display: flex;
      color: rgb(174, 174, 174);
      cursor: pointer;


      .avatar-container {
        height: 100%;
        width: 38px;

        .avatar {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
      }

      .chat-list-item-right {
        flex: 1;
        display: flex;
        padding-left: 10px;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0; // 关键：允许flex子元素收缩
        overflow: hidden;
      }

    }

    .topActive {
      background-color: rgb(234, 234, 234);
    }

    li:hover {
      background-color: rgb(234, 234, 234);
    }

  }

  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .chat-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  .chat-name {
    font-size: 13px;
    color: black;
    flex: 1;
    min-width: 0;
  }

  .chat-time {
    font-size: 10px;
    flex-shrink: 0;
    margin-left: 8px;
  }


}
</style>
